<template>
  <view class="search-container">
    <!-- 搜索框 -->
    <view class="search-input">
      <!-- 展示图书馆名字 -->
      <view class="title">深圳技术大学图书馆</view>
      <!-- 中间的分为两部分 -->
      <view class="content">
        <!-- 左边为条件 右边输入 -->
        <view class="filter">
          <uni-data-select v-model="value" :localdata="range" @change="change" :clear="false"></uni-data-select>
        </view>
        <view class="input-content">
          <view class="icon">
            <uni-icons type="search" size="16" color="#b4b4b4"></uni-icons>
          </view>
          <input v-model="content" class="inp" type="text" placeholder="输入检索词" />
        </view>
      </view>

      <!-- 检索按钮 -->
      <view class="btn-search">
        <button @click="search">检索</button>
      </view>
    </view>

    <!-- 书籍推荐 -->
    <view class="recommend">
      <view class="recommend-title">
        <uni-icons type="hand-up-filled" color="#ffdd1c" size="24"></uni-icons>
        <text>推荐图书</text>
      </view>

      <view class="list">
        <bookList :books="books"> </bookList>
      </view>
    </view>
  </view>
</template>

<script>
import bookList from './components/book-list.vue';
import { getRecommendBookListAsync } from '@/api/book.js'

export default {
  data () {
    return {
      value: 0,
      range: [
        { value: 0, text: '作者' },
        { value: 1, text: 'ISBN' },
        { value: 2, text: '书名' },

      ],
      content: '',
      filter: '',
      books: []
    };
  },
  components: {
    bookList
  },
  onLoad () {
    this.$nextTick(() => {
      this.filter = this.range[this.value].text;
    });
    this.getRecommendBookList()
  },
  methods: {
    // 点击筛选条件
    change (e) {
      this.filter = this.range[this.value].text;
      console.log(e);
    },
    //点击搜索按钮
    search () {
      const path = `/subpackage/book-search/details?content=${this.content}&filter=${this.filter}`;
      console.log(path);
      uni.navigateTo({
        url: path
      });
    },

    // 获取推荐前三的书单列表
    async getRecommendBookList () {
      try {
        const res = await getRecommendBookListAsync()
        this.books = res.data.data.map(item => {
          item.status = Number(item.status)
          return item
        })
        this.books = this.books.slice(0, 3)

      } catch (error) {
        console.log('%c [  ]-56', 'font-size:13px; background:pink; color:#bf2c9f;', error)
      }
    }
  }
};
</script>

<style lang="scss">
.search-container {
  .search-input {
    margin: 0 auto;
    width: 85%;
    height: 400rpx;
    border-radius: 25rpx;
    background-color: #fff;
    padding: 20rpx;
    margin-top: 30rpx;
    box-sizing: border-box;

    .title {
      height: 60rpx;
      line-height: 60rpx;
      font-size: 26rpx;
      margin-bottom: 20rpx;
      font-weight: 700;
      letter-spacing: 2rpx;
    }

    .content {
      $color: #e7e7e7;
      width: 100%;
      display: flex;
      height: 140rpx;
      align-items: center;
      border-top: 1rpx solid $color;
      border-bottom: 1rpx solid $color;
      border-radius: 10rpx;
      margin-bottom: 30rpx;

      .filter {
        .uni-select {
          border: none;
          width: 150rpx;
          text-align: center;
          font-weight: 700;
          font-size: 28rpx;
        }
      }

      .input-content {
        flex: 1;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 20rpx;
        border-left: 1rpx solid $color;

        .icon {}

        .inp {
          margin-left: 10rpx;
        }
      }
    }

    .btn-search {
      button {
        box-shadow: 0 10rpx 10rpx 5rpx #dbfffe;
        color: #fff;
        font-weight: 700;
        background-color: skyblue;
      }
    }
  }

  .recommend {
    width: 85%;
    margin: 0 auto;
    margin-top: 40rpx;

    .recommend-title {
      height: 80rpx;
      line-height: 80rpx;
      color: #adadad;
      font-weight: 700;

      text {
        font-size: 32rpx;
        margin-left: 20rpx;
      }
    }
  }
}
</style>
